<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="/css/userinfo.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/common/commonJS.js"></script>

</head>
<body>
    <div id="info-header">
        <hr class="layui-bg-blue" style="margin-top: 5vh;">
    </div>
    <div class="sider-menu">
    <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" style="margin-top: 1vh;">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="#/a">默认展开</a>
        </li>
        <li class="layui-nav-item">
            <a href="#/html">解决方案</a>
        </li>
        <li class="layui-nav-item"><a href="#/css">云市场</a></li>
        <li class="layui-nav-item"><a href="#/javascript">社区</a></li>
    </ul>
    </div>
    <div class="side-content">

    </div>


<script>
    (function(){
        var Router = function () {
            this.routes = {};//保存路由
            this.curUrl = '';//获取当前的hash值
        };
        Router.prototype.init = function () {
            //hashchange事件，当hash变化时，调用reloadPage方法
            //第一个this指向window，bind里面的this指向调用这个函数的对象，具体使用方法可以百度
            window.addEventListener('hashchange', this.reloadPage.bind(this));
        };

        Router.prototype.reloadPage = function () {
            this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
            this.routes[this.curUrl]();      //运行当前hsah值对应的函数
        };

        Router.prototype.map = function( key, callback ){ //保存路由对应的函数：
            this.routes[key] = callback;  //key表示hash的值（去掉#），callback表示当前hash对应的函数
        };
        window.oRou = Router;
    })();
    var oRouter2 = new oRou();
    oRouter2.init();
    oRouter2.map('/a',function () {
        var oSidebar = $("#side-content");
        oSidebar.append('我是主页');
    });

    oRouter2.map('/html',function () {
        var oSidebar = $("#side-content");
        oSidebar.append('我是html页面');
    });

    oRouter2.map('/css',function () {
        var oSidebar = $("#side-content");
        oSidebar.append('我是css页面');
    });

    oRouter2.map('/javascript',function () {
        var oSidebar = $("#side-content");
        oSidebar.append('我是javascript页面');
    });
</script>

</body>
</html>